<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>vue 事件</title>
</head>
<body>
    <div id="main" v-on:click=""><!--加不加（）都行-->
          <form action="" method="get" v-on:submit.prevent="submit2" ><!--onsubmit="return false"-->
             <input type="text" name='name'>
             <input type="submit" value="提交">
          </form>
          <div class="bigger" style="width: 300PX;height: 200px;background:pink;" v-on:click="bigger"><!---bigger 包含了 small区域-->
               <div class='small' v-on:click.stop="small" style="width:100px; height:100px;background: rebeccapurple;">小区域</div>
          </div>
          <div v-bind:class="classname"></div><!---常规的属性绑定-->
          <div v-bind:[nm]="classname"></div><!---动态属性名称为驼峰书写时不行会报错,个人认为vue 会把驼峰的说法转成小写 attrname-->
          <div V-on:[method]='click'>动态方法绑定</div>
    </div>
</body>
<script>
    let vue = new Vue({ //在源码里是个function，在js里 class 的底层也是function
        el:'#main',//document.querySelector()
        data:{
            classname:'class123456',
            param:'class',
            nm:'id',
            method:'click'
        },
        methods:{//事件写在 methods 中，记得是个复数
            click:function(){
                console.log("点击了")
            },
            submit:function(even){
                even.preventDefault();//传递事件的方案去阻止默认行为
                console.log("提交了")
            },
            submit2:function(){
                console.log("提交了")
            },
            bigger:function(){
                console.log("大区域被点击了")
            },
            small:function(even){
                //even.stopPropagation();
                console.log("小区域被点击了")
            }

        }

    });
</script>
</html>